/**
 * bug分析：  
 * 1. 页面初始化加载第一页的数据，如果在数据加载完毕后，再拖动滚动条，可以正常加载第二页，但是如果第一页的数据还没有加载完毕，就拖动滚动条，则加载时机未到，即会请求第二页
 * 2
 */

//页面初始化加载数据

// 获取dom
var listEl = document.querySelector(".guess-list");
var ulEl = document.querySelector(".guess-list .guess-item");
var page = 1;
var flag = true;

//请求第一页的数据-----

function loadData() {
    var xhr = new XMLHttpRequest();

    xhr.open("get", "./api/shopping.php?page=" + page, true);

    xhr.send();
    xhr.onreadystatechange = function() {
        console.log(1);
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            if (!data.code) {
                //有数据
                var html = ''
                data.list.forEach(function(item) {
                    html += `
                    <div class="guess-item">
                <div class="guess-item-img">
                <img src="${item.img}" alt="">
            </div>
            <!-- 文字 -->
            <div class="guess-item-detail">
                <div class="guess-item-info">
                    ${item.txt}
                </div>
                <div class="guess-item-price">
                    ${item.price}
                </div>
            </div>
            </div>
            `
                })
                listEl.innerHTML += html;
                flag = true;
            } else {
                listEl.innerHTML += '没有更多数据'
            }
        }
    }
}
loadData();


/**
 * bug分析：  
 * 1. 页面初始化加载第一页的数据，如果在数据加载完毕后，再拖动滚动条，可以正常加载第二页，但是如果第一页的数据还没有加载完毕，就拖动滚动条，则加载时机未到，即会请求第二页
 * 2
 */

//页面初始化加载数据

// 获取dom
// var listEl = document.querySelector(".list");
// var ulEl = document.querySelector(".list ul");
// var page = 1;
// var flag = true;

// //请求第一页的数据

// function loadData() {
//     var xhr = new XMLHttpRequest();

//     xhr.open("get", "./scrollLoad.php?page=" + page, true);

//     xhr.send();
//     xhr.onreadystatechange = function() {
//         if (xhr.readyState == 4 && xhr.status == 200) {
//             var data = JSON.parse(xhr.responseText);
//             if (!data.code) {
//                 //有数据
//                 var html = ''
//                 data.list.forEach(function(item) {
//                     html += `
//                 <li class="recommend-item">
//                             <a href="javascript:;">
//                                 <img src="${item.img}" alt="">
//                                 <div class="recommend-name">${item.name}</div>
//                                 <div class="recommend-price">${item.str}</div>
//                                 <div class="recommend-tips">${item.pj}</div>
//                             </a>
//                             <div class="recommend-action">
//                                 <a class="btn-small" href="">加入购物车</a>
//                             </div>
//                         </li>
//             `
//                 })
//                 ulEl.innerHTML += html;
//                 flag = true;
//             } else {
//                 ulEl.innerHTML += '没有更多数据'
//             }
//         }
//     }
// }
// loadData();

//当滚动页面时
window.onscroll = function() {
    // 滚动条到: 701  窗口 937   pageH-100: 1638   请求page = 2
    // 数据还没过来 ，此时即使触发加载时机，也不能加载第三页
    //数据如果已经过来，页面高度发生了变化，再次触发加载时机，可以加载第三页

    var scrollTop = document.documentElement.scrollTop; //1400
    var winH = document.documentElement.clientHeight; //500

    //pageH的值，在没有加载新数据时是不变的，但渲染了新数据后，高度增加
    var pageH = listEl.offsetTop + listEl.clientHeight; // 2000-100

    // console.log('scrollTop', scrollTop, 'winH', winH, 'pageH-100', pageH - 100);

    if (scrollTop + winH >= pageH - 100) {
        if (flag) {
            flag = false;
            page++;
            console.log('加载下一页');
            loadData()
        }
    }

}